<template>
  <div class="Order">
    <h1>订单管理</h1>
    <el-card shadow="hover">
      <div class="jy">
        <img
          src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%AE%A1%E7%90%86/u453.png"
          alt="" />筛选
      </div>
      <div class="formBox">
        <el-form :model="ruleForm" :inline="true" ref="ruleFormRef">
          <el-form-item label="输入搜索">
            <el-input v-model="ruleForm.userPhone" placeholder="手机号..." style="width: 163px; height: 32px" />
          </el-form-item>
          <el-form-item label="提交时间">
            <el-col :span="11">
              <el-date-picker v-model="ruleForm.startTime" type="date" placeholder="开始日期"
                style="width: 163px; height: 32px" />
            </el-col>
            <el-col :span="2" class="text-center">
              <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="11">
              <el-date-picker v-model="ruleForm.stopTime" type="date" placeholder="结束日期"
                style="width: 163px; height: 32px" />
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="btn" @click="screening">筛选</el-button>
          </el-form-item>
          <el-form-item>
            <el-button class="btn1" @click="resetForm(ruleFormRef)" type="text">清空筛选条件</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card shadow="hover">
      <div class="jy">
        <img
          src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%AE%A1%E7%90%86/u434.png"
          alt="" />订单列表
      </div>
      <div>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <!-- 全部 -->
          <el-tab-pane label="全部订单" name="first">
            <div class="table">
              <el-table :data="tableData" style="width: 100%" :header-cell-style="{
                background: '#9137f3',
                color: '#ffffff',
                height: '60px',
                'font-size': '14px', 'text-align': 'center',
              }">
                <el-table-column property="orderNum" label="订单编号" width="115" align="center" />
                <el-table-column label="用户微信昵称" width="110" property="wechatName" align="center">
                </el-table-column>
                <el-table-column property="userPhone" width="110" label="用户手机号码" align="center" />
                <el-table-column property="courseName" label="课程名称" align="center" />
                <el-table-column property="id" label="课程编号" align="center" />
                <el-table-column property="coursePrice" label="订单金额(元)" align="center" />
                <el-table-column property="orderStatus" label="订单状态" align="center" />
                <el-table-column property="submitTime" label="提交时间" width="110" align="center" />
                <el-table-column label="操作" width="180" align="center">
                  <template #default="scope">
                    <span class="btn1" @click="tz(scope.row.orderNum)">查看订单</span>
                    <span v-if="scope.row.orderStatus == '学习中'" @click="aadd(scope.row.orderNum, '取消订单')"
                      class="btn1">取消订单</span>
                    <span v-if="scope.row.orderStatus == '待支付'" @click="aadd(scope.row.orderNum, '取消订单')"
                      class="btn1">取消订单</span>
                    <span v-if="scope.row.orderStatus === '已结束'" @click="aadd(scope.row.orderNum, '删除订单')"
                      class="btn1">删除订单</span>
                    <span v-if="scope.row.orderStatus === '学习中'" @click="aadd(scope.row.orderNum, '结束课程')"
                      class="btn1">结束课程</span>
                  </template>
                </el-table-column>
              </el-table>
              <div style="display: flex;justify-content: right;margin-top: 20px;">
                <div class="total">
                  <span style="font-family:'思源黑体';font-weight:400;">共</span>
                  <span style="font-family:'思源黑体 Bold', '思源黑体 ,Regular';font-weight:700;color:#9137F3;">{{
                      Math.ceil(total / limit)
                  }}</span>
                  <span style="font-family:'思源黑体';font-weight:400;">页/</span>
                  <span style="font-family:'思源黑体 Bold', '思源黑体 Regular', '思源黑体';font-weight:700;color:#9137F3;">{{ total
                  }}</span>
                  <span style="font-family:'思源黑体';font-weight:400;">条数据</span>
                  <el-pagination v-model:page-size="limit" :page-sizes="[10, 20, 30]" default background
                    @current-change="changePage" layout="prev, pager, next" :total="total" class="mt-4" />
                </div>
              </div>

            </div>
          </el-tab-pane>
          <!-- 付款 -->
          <el-tab-pane label="待付款" name="second">
            <tableVue :orderStatus="'待支付'" />
          </el-tab-pane>
          <!-- 学习中 -->
          <el-tab-pane label="学习中" name="third">
            <tableVue :orderStatus="'学习中'" />
          </el-tab-pane>
          <!-- 完成 -->
          <el-tab-pane label="已完成" name="已完成">
            <tableVue :orderStatus="'未支付'" />
          </el-tab-pane>
          <!-- 关闭 -->
          <el-tab-pane label="已关闭" name="已关闭">
            <tableVue :orderStatus="'已结束'" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
    <!--对话框 -->
    <el-dialog v-model="cancelTheOrder" :title="title" width="30%" center>
      <el-form :model="form">
        <el-form-item label="备注操作">
          <el-input v-model="form.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelTheOrder = false">取消</el-button>
          <el-button type="primary" @click="operation">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import tableVue from "../components/table.vue";
import axios from '../utils/http';
import {
  ElDialog,
  ElPagination,
  ElTableColumn,
  ElCard,
  ElCol,
  ElInput,
  ElForm,
  ElFormItem,
  ElDatePicker,
  ElButton,
  ElTabs,
  ElTabPane,
  ElTable,
  ElMessage
} from "element-plus";
import { ref, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
let cancelTheOrder = ref(false)
const tableData = ref([]);
const tableDataB = ref([]);
let title = ref("")
const activeName = ref("first");
const form = ref({ remark: "" });
const ruleFormRef = ref()
//分页
let page = ref(1);
let limit = ref(10);
let total = ref(0);
let changePage = function (value) {
  page.value = value;
  query();
};
let ruleForm = reactive({
  userPhone: "",
  startTime: "",
  stopTime: ""
});
const router = useRouter();
const orderOperation = {
  id: 0,
  //操作内容
  operateMsg: "",
  // 操作人
  operatePerson: "aa",
  //操作时间
  operateTime: "",
  // 订单编号
  orderId: "",
  //备注
  remark: ""
}
const handleClick = (tab, event) => {
  console.log(tab, event);
};
//时间
const toDub = n => n < 10 ? '0' + n : '' + n;
const toDate = (date) => {
  const oDate = new Date(date);
  return oDate.getFullYear() + '-' + toDub(oDate.getMonth() + 1) + '-' + toDub(oDate.getDate()) + ' ' + toDub(oDate.getHours()) + ':' + toDub(oDate.getMinutes()) + ':' + toDub(oDate.getSeconds());
};
//确认筛选
const screening = () => {
  axios({
    url: '/order/queryAll',
    params: {
      page: 1,
      limit: 100,
      userPhone: ruleForm.userPhone,
      startTime: toDate(ruleForm.startTime),
      stopTime: toDate(ruleForm.stopTime),
      status: "全部订单"
    }
  }).then((res) => {
    console.log(res);
    if (res.data.code == 0) {
      tableData.value = res.data.data
    }
  })
}
//清空筛选
const resetForm = () => {
  ruleForm.userPhone = "",
    ruleForm.startTime = "",
    ruleForm.stopTime = ""
  query()
}
const tz = function (orderNum) {
  console.log(orderNum);
  router.replace({
    name: "Order-detail",
    query: {
      orderNum: orderNum
    }
  });
}
//订单操作
const aadd = (orderId, titleA) => {
  title.value = titleA
  orderOperation.operateMsg = titleA
  cancelTheOrder.value = true
  orderOperation.orderId = orderId
  console.log('wew', orderOperation);
}
//操作接口

const operation = () => {
  orderOperation.remark = form.value.remark
  axios({
    url: "/operation/update",
    method: "post",
    data: {
      orderOperation
    }
  }).then((res) => {
    console.log('结果', res.data);
    if (res.data.code == 0) {
      form.value.remark = ""
      cancelTheOrder.value = false
      ElMessage({
        message: `${orderOperation.operateMsg}成功`,
        type: 'success',
      })
    }
  })

}
//查询全部数据
const query = () => {
  axios({
    url: "/order/queryAll",
    params: {
      page: page.value,
      limit: limit.value,
      status: "全部订单"
    }
  }).then((res) => {
    console.log(res.data.data);
    if (res.data.code == 0) {
      tableData.value = res.data.data
    }
  })
}

onMounted(() => {
  
  axios({
    url: "/order/queryAll",
    params: {
      page: page.value,
      limit: 1000,
      status: "全部订单"
    }
  }).then((res) => {
    if (res.data.code == 0) {
      tableDataB.value = res.data.data
      total.value = tableDataB.value.length
      
    }
  })
  query()
})
</script>

<style lang="less" scoped>
.Order {
  padding: 20px 70px;

  h1 {
    height: 50px;
    color: #9137f4;
  }

  .btn1 {
    color: #9137f3;
    background-color: white;
    border: 1px solid white;
    margin-left: 20px;
    cursor: pointer;
  }

  .el-card {
    margin-bottom: 12px;

    .jy {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 400;

      img {
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }
    }

    .formBox {
      margin-top: 20px;

      .btn {
        background-color: #9137f3;
        border: 1px solid #9137f3;
      }

      //   清空筛选条件按钮
      .btn1 {
        color: #9137f3;
        background-color: white;
        border: 1px solid white;
        margin-left: 20px;
        cursor: pointer;
      }
    }
  }

  .total {
    margin-top: 50px;
    margin-right: 28.8px;
    font-size: 12px;
    color: #333333;
    display: flex;
    align-items: center;
    float: right;
  }
}
</style>
<style lang="less">
.Order {
  .el-tabs__nav-scroll> .el-tabs__nav >.el-tabs__active-bar{
    background-color: #9239f3 !important;
  }
  .el-tabs__item.is-active,.el-tabs__item:hover{
    color: #9239f3;
  }
  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev {
    border-radius: 16px;
    border: 1px solid #9239f3;
  }

  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev:hover {
    color: #ffffff;
    background-color: #9239f3;
  }

  .el-pagination.is-background .btn-next:disabled,
  .el-pagination.is-background .btn-prev:disabled {
    color: #9239f3;
    background-color: #ffffff;
  }

  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    color: #9239f3;
    background-color: #ffffff;
    border: 1px solid #9239f3;
  }

  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li:hover {
    color: #ffffff;
    background-color: #9239f3;
  }

  .el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
    color: #ffffff;
    background-color: #9239f3;
  }

  .el-card {
    .el-table__row {
      font-size: 12px;
    }
  }

  .el-table_1_column_10 {
    .cell {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }


}

.el-form-item__label {
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #333333;
}
</style>
